<template>
  <view class="uni-header">
    <uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
  </view>


  <view class="unify-container">
    <uni-forms :rules="rules" label-align="center" class="uni-forms" ref="form" :modelValue="formData"
      validateTrigger="bind">
      <uni-forms-item class="flex-center-x" name="platform" label="平台">
        <uni-data-checkbox multiple v-model="formData.platform" :localdata="platformList" />
      </uni-forms-item>
      <uni-forms-item name="path" label="接口地址" required>
        <uni-easyinput placeholder="请输入接口地址" v-model="formData.path" trim="both" :clearable="false" />
      </uni-forms-item>
      <uni-forms-item name="description" label="接口描述">
        <uni-easyinput type="textarea" v-model="formData.description" placeholder="请输入接口描述" />
      </uni-forms-item>
      <uni-forms-item class="flex-center-x" name="anonymous" label="匿名访问">
        <uni-data-checkbox v-model="formData.anonymous" :localdata="anonymousList" />
      </uni-forms-item>
      <uni-forms-item class="flex-center-x" name="allow" label="允许访问">
        <uni-data-checkbox v-model="formData.allow" :localdata="allowList" />
      </uni-forms-item>
      <uni-forms-item class="flex-center-x" name="authList" label="关联权限" required>
        <uni-data-checkbox multiple v-model="formData.authList" :localdata="authList"></uni-data-checkbox>
      </uni-forms-item>
      
      <view class="uni-button-group">
        <button type="primary" class="uni-button" style="width: 100px;"
          @click="submitForm">{{$t('common.button.submit')}}</button>
        <navigator open-type="navigateBack" style="margin-left: 15px;">
          <button class="uni-button" style="width: 100px;">返回</button>
        </navigator>
      </view>
    </uni-forms>
  </view>
  <fix-window />
</template>

<script>
  import {
    mapActions
  } from 'vuex'
  export default {
    data() {
      return {
        rules: {
          path: {
            rules: [{
              required: true,
              errorMessage: "请输入接口地址"
            }]
          },
          description: {
            rules: [{
              minLength: 1,
              maxLength: 255,
              errorMessage: '接口描述长度在 {minLength} 到 {maxLength} 个字符',
            }]
          },
          anonymous: {
            rules: [{
              required: true,
              errorMessage: "请选择是否匿名"
            }]
          }
        },
        formData: {},
        anonymousList: [],
        authList:[],
        platformList:[],
        allowList:[],
      }
    },
    onLoad(params) {
      this.buildPage(params)
    },
    methods: {
      ...mapActions({
        getApiForm: "api/form",
        saveApi: "api/save",
      }),
      async buildPage(params = {}) {
        uni.showLoading({
          mask: true,
        })

        let data = await this.getApiForm(params);

        this.formData = data.entity;

        this.anonymousList = [];
        Object.keys(data.anonymous).forEach(key => {
          this.anonymousList.push({
            text: data.anonymous[key],
            value: parseInt(key)
          })
        })
        
        this.allowList = [];
        Object.keys(data.allow).forEach(key => {
          this.allowList.push({
            text: data.allow[key],
            value: parseInt(key)
          })
        })
        
        this.authList = [];
		
        Object.keys(data.authIds).forEach(key => {
          this.authList.push({
            text: data.authIds[key],
            value: key
          })
        })
        
        this.platformList = [];
        Object.keys(data.platform).forEach(key => {
          this.platformList.push({
            text: data.platform[key],
            value: key
          })
        })

        uni.hideLoading()
      },
      submitForm() {
        uni.showLoading({
          mask: true
        })

        this.$refs.form.validate().then(data => {

          data.id = this.formData.id || 0;
          this.saveApi(data).then(res => {
            uni.showModal({
              title: "提示",
              content: "操作成功",
              confirmText: "继续添加",
              cancelText: "返回",
              success: (e) => {
                if (e.cancel) {
                  this.back()
                } else {
                  this.buildPage()
                }
              }
            })
          }).finally(_ => {
            uni.hideLoading()
          })
        }).catch(() => {
          uni.hideLoading()
        })
      },
    }
  }
</script>